<script lang="ts" setup>
import HeaderView from './comps/HeaderView.vue'
import LeftMenu from './comps/LeftMenu.vue'
import { appState } from '../../common/manager/appManager'
import { excludePath } from '../../router'
import { computed, onMounted } from 'vue'
import UpLayoutView from './comps/UpLayoutView.vue'
import BackLayoutView from './comps/BackLayoutView.vue'

/**
 * 只显示内容部分
 */
const showNavView = computed(() => {
  return !appState.embed
})

onMounted(() => {
})

</script>

<template>
  <!--隐藏图层-->
  <back-layout-view />
  <div v-if="appState.userInit"
       class="layout-container">
    <!--左侧菜单-->
    <left-menu v-if="showNavView" />

    <!--内容-->
    <div class="main-body">
      <div :class="[showNavView?'main-content':'main-content-full']">
        <router-view v-slot="{ Component }">
          <keep-alive :exclude="excludePath">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>

      <!--顶部头-->
      <header-view v-if="showNavView" />
    </div>

    <!--上层图层-->
    <up-layout-view />
  </div>
  <!--加载状态-->
  <v-loading v-if="!appState.userInit||appState.isLoading" />
</template>
<style scoped lang="scss">
.layout-container {
  @include abs-group();
  @include hor-group();
  background: var(--w-bg-nor);

  .main-body {
    flex:auto;
    width:100%;
    height:100%;
    position:relative;
    overflow: hidden;

    .main-content{
      position:absolute;
      left:var(--w-page-padding-left);
      right:var(--w-page-padding-right);
      bottom:var(--w-page-padding-bottom);
      top:calc(var(--w-page-padding-top) + var(--w-header-size));
      box-sizing: border-box;
    }
    .main-content-full{
      @include abs-group( );
    }
  }

  :deep(.el-tabs__content){
    height:calc(100% - 50px);
  }
  :deep(.el-tab-pane){
    height:100%;
    position:relative;
  }
}

</style>
